/**
 * xx01 查询出<#if aggregate.desc??>${aggregate.desc}<#else>数据</#if>列表
 */
export const remote${aggregate.largeCamelName}QueryList = (params) => {
  return jsonPostRequest('/${domain.system}/${domain.name}/${aggregate.name}/query_list', params)
}

<template>
  <div class="es-list">
    <Tabs
      class="es-list-card"
      :animated="false"
      type="card"
      closable
      :value="selectedTab"
      @on-tab-remove="tabClose"
      @on-click="tabClick"
    >
      <TabPane name="home" label="${aggregate.desc}列表" animated="false" :closable="false"></TabPane>
      <TabPane v-for="item in tabs" :label="item.name" :key="item.id" :name="item.id"></TabPane>
    </Tabs>
    <div class="es-list-content" id="rightContent">
      <keep-alive>
        <component
          v-bind:is="currentComponent"
          @changeTab="changeTab"
          @tabClose="tabClose"
          v-bind:id="id"
        ></component>
      </keep-alive>
    </div>
  </div>
</template>

<script>
import home from "./components/${aggregate.name}_list.vue";
import detail from "./components/${aggregate.name}_detail.vue";
import add from "./components/${aggregate.name}_add.vue";
import update from "./components/${aggregate.name}_update.vue";

export default {
  data() {
    return {
      id: "",
      action: '',
      selectedTab: "home",
      tabs: []
    };
  },
  computed: {
      currentComponent() {
        return  this.selectedTab ? this.selectedTab : 'home';
      }
  },
  components: {
    home,
    detail,
    add,
    update
  },
  methods: {
    showTab(name, id = this.action) {
        var tab = this.tabs.find(a => {
            return a.id == id;
        });
        if (!tab) {
            tab = {
                id: id,
                name: name
            };
            this.tabs.push(tab);
        }
        this.selectedTab = tab.id.toString();
    },
    tabClose(id) {
        var index = -1;
        for (var i = 0, length = this.tabs.length; i < length; i++) {
            if (id == this.tabs[i].id) {
                index = i;
                break;
            }
        }
        this.tabs.splice(index, 1);
        if (this.selectedTab == id) {
            this.selectedTab = "home";
        }
    },
    tabClick(id) {
        this.selectedTab = id;
    },
    changeTab: function(detail) {
      this.id = detail.id;
      this.action = detail.action;
      if(detail.action === 'detail'){
        this.showTab("${aggregate.desc}详情");
      }else if(detail.action === 'update'){
        this.showTab("修改${aggregate.desc}");
      }else if(detail.action === 'add'){
        this.showTab("添加${aggregate.desc}")
      }
    },
  }
};
</script>